<template>
  <div class="cart">
    <!-- 导航栏 -->
    <van-nav-bar title="购物车" left-text="" left-arrow  
    @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
	
	<!-- 内容 -->
	<div class="con" style="margin-bottom:100px">
		<div class="item" v-for="item in cartList" :key="item.cartItemId">
			<van-checkbox v-model="item.checked"></van-checkbox>
			<img :src="item.goodsCoverImg" alt="" style="width:30%">
			<div class="shopping">
				<h3>{{item.goodsName}}</h3>
				<p>￥{{item.sellingPrice}}</p>
				<van-stepper v-model="item.goodsCount" />
			</div>
		</div>
	</div>
	
	<!-- 提交订单 -->
	<van-submit-bar :price="priceAll" button-text="结算" @submit="onSubmit">
	  <van-checkbox v-model="checkedAll">全选</van-checkbox>
	 <!-- <template #tip>
	    你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
	  </template> -->
	</van-submit-bar>
	
  </div>
</template>

<script>
	
export default {
  name: 'Cart',
  methods:{
	  onClickLeft(){
		  this.$router.back();
	  },
	  onSubmit(){
		  
	  }
  },
  created(){
	  this.$store.dispatch("asyncCartList");
  },
  computed:{
	  cartList(){
		  console.log(this.$store.state.cartlist)
		  return this.$store.state.cartlist;
	  },
	  checkedAll:{//计算属性
		 get(){//checkedAll的最终结果
			return this.cartList.every(item=>{
				return item.checked==true
			}) 
		 },
		 set(val){//checkedAll改变上面的单个也要改变
			this.cartList.map(item=>{
				item.checked=val;
				return item;
			})
		 }
	  },
	  priceAll(){
		  if(this.cartList.length==0){
			  return 0;
		  }
		  return this.cartList.reduce((result,item)=>{
			  return result+(item.checked?(item.goodsCount*item.sellingPrice*100):0)
		  },0)
	  }
  }
}
</script>

<style lang="less" scoped>
	// .item{
	// 	display: flex;
	// }
	// .van-submit-bar{
	// 	bottom:50px;
	// }
	
	.con {
	  .item {
	    display: flex;
	    /deep/.van-icon-success {
	      margin-left: 10px;
	    }
	    img {
	      width: 100px;
	      height: 100px;
	      margin-left: 15px;
	    }
	    .shopping {
	      width: 193px;
	      height: 102px;
	      margin-left: 25px;
	      h2 {
	        list-style: none;
	        color: #2c3e50;
	        font-size: 12px;
	        margin-top: 20px;
	      }
	      p {
	        color: #ff0000;
	        font-size: 16px;
	        text-align: left;
	        margin-top: 10px;
	      }
	      .van-stepper {
	        margin-top: -20px;
	        text-align: right;
	      }
	    }
	  }
	}
	.van-submit-bar {
	  bottom: 50px;
	  .van-submit-bar__button {
	    background: #1baeae;
	  }
	}


</style>
